<template>
  <div class="openproject-detail common-code-table">
    <div class="header">
      <div class="header-desc">
        <div class="header-left">
          <div class="title">{{ curPublicProject.projectName }}</div>
          <p class="desc">{{ curPublicProject.profile }}</p>
        </div>
        <div class="header-right">
          <div class="project-env">
            <span
              class="algorithm-text"
              v-show="curPublicProject.algorithm">
              <img src="@/common/image/icon-project/icon-project-algorithm-light.png">{{ curPublicProject.algorithm }}
            </span>
            <span
              class="language-text"
              v-show="curPublicProject.language">
              <img src="@/common/image/icon-project/icon-project-language-light.png">{{ curPublicProject.language }}
            </span>
          </div>
        </div>
      </div>
      <ul class="nav-list">
        <li class="main-nav-list nav-left clearfix">
          <ul class="main-nav-list-container">
            <li
              class="nav-item link-item"
              :class="{'active': activeTab === 0}"
              @click="toggleActive(0)">
              <i class="icon icon-parameter"></i>
              运行任务
            </li>
            <li
              class="nav-item link-item"
              :class="{'active': activeTab === 1}"
              @click="toggleActive(1)">
              <i class="icon icon-code"></i>
              项目代码
            </li>
            <li
              class="nav-item link-item"
              :class="{'active': activeTab === 2}"
              @click="toggleActive(2)">
              <i class="icon icon-dataset"></i>
              数据集
            </li>
          </ul>
        </li>
        <li class="main-nav-list nav-right">
          <div class="header-btn">
            <el-button
              class="fork-btn"
              size="medium "
              type="primary"
              @click="copyProject">
              <i class="button-icon button-icon-fork" />克隆项目
            </el-button>
          </div>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="project-run" v-if="activeTab === 0">
        <div class="task-table">
          <el-table
            :data="taskList"
            style="width: 100%"
            :header-row-class-name="tableheaderClassName">
            <el-table-column
              width="26">
              <template >
                <div class="table-seize">
                  <span>1</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="代号"
              :show-overflow-tooltip="true"
              width="224">
              <template slot-scope="scope">
                <div class="table-link table-links">
                  <span>#{{scope.row.codeNo}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="size"
              label="状态"
              width="158">
              <template slot-scope="scope">
                <span class="status-box" :class="[scope.row.statusClass]">{{ scope.row.status }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="开始时间"
              width="272">
              <template slot-scope="scope">
                <span class="task-time">{{ scope.row.createdTime ? new Date(scope.row.createdTime).Format("yyyy-MM-dd hh:mm:ss") : '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="size"
              label="用时"
              width="232">
              <template slot-scope="scope">
                <span>{{ scope.row.duration }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="size"
              label="操作">
              <template slot-scope="scope">
                <span class="table-action" @click="linkToTaskDetail(scope.row)">
                  查看
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="basePagenate">
          <el-pagination
            @size-change="handleSizeChangeTask"
            @current-change="handleCurrentChangeTask"
            :page-size="pageSizeTask"
            :current-page="pageNumberTask"
            :total="totalTask"
            layout="prev, pager, next">
          </el-pagination>
        </div>
      </div>
      <div class="prj-code" v-if="activeTab === 1">
        <div class="content">
          <div class="filepath-header">
            <div class="filepath-header-left">
              <img class="file-icon" src="@/common/image/icon/folder.png">
              <div class="breadcrumb" v-if="curFilePath === '/'">
                <span class="file-path" @click="clickFilePath('/')">/code</span>
              </div>
              <div class="breadcrumb" v-else>
                <span class="file-path" @click="clickFilePath('/')">/code</span>
                <span class="file-path" v-for="(item, key) in filePath.slice(1)" :key="key" @click="clickFilePath(item, key)">/{{item}}</span>
                <span class="file-path" v-if="previewFilePath">/{{previewFilePath}}</span>
              </div>
            </div>
          </div>
          <div v-show="!showEditor">
            <div class="file-table">
              <el-table
                :header-cell-class-name="tableheaderClassName"
                :data="fileList"
                style="width: 100%">
                <!-- <el-table-column type="selection" width="40"></el-table-column> -->
                <el-table-column>
                  <template slot="header" slot-scope="slot">
                      <a class="table-head">
                        <i class="head-icon">{{slot}}</i>
                        <span class="head-txt">文件/文件夹名称</span>
                      </a>
                  </template>
                  <template slot-scope="scope">
                    <div class="table-link" @click="clickTableRow(scope.row)">
                      <i
                      :class="{
                        'file-pic': scope.row.isImg,
                        'file-icon': !scope.row.directory && !scope.row.isImg,
                        'folder-icon': scope.row.directory}"></i>
                      <span>{{ scope.row.fileName }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="修改日期"
                  width="230">
                  <template slot-scope="scope">
                    <span>{{ new Date(scope.row.updateTime).Format("yyyy-MM-dd hh:mm:ss") }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="size"
                  label="大小"
                  width="188">
                  <template slot-scope="scope">
                    <span>{{ scope.row.size ? scope.row.size : '--' }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="basePagenate">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :current-page="pageNumber"
                :total="totalPage"
                layout="prev, pager, next">
              </el-pagination>
            </div>
            <div class="markdown-box" v-if="showMarkdown">
              <div class="header-markdown">
                <span class="header-left"><img src="@/common/image/icon/book-open-variant.png">README.md</span>
              </div>
              <viewer
                :value="markdownData"
                height="500px"
                class="markdown-content"
              />
            </div>
          </div>
          <div v-show="showEditor" class="editor-container">
            <div class="editor-header">
              <span>{{curEditFile.fileName}}</span>
              <!-- <div v-show="showEdit" class="action r" @click="doEdit">编辑</div>
              <div v-show="!showEdit" class="r">
                <span class="action" @click="doEditSave">保存</span>
                <span class="action" @click="doEditCancle">取消</span>
              </div> -->
            </div>
            <div class="code-eidtor">
              <div
                ref="container"
                id="container"
                style="width:100%;height:700px;border:1px solid #ccc"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="prj-dataset" v-if="activeTab === 2">
        <openProDataset />
      </div>
    </div>
    <el-dialog
      title="图片浏览"
      :visible.sync="dialog.picPreview"
      :pos="'center'"
      width="40%">
      <div class="file-panel picPreview">
        <img :src="curPicPreView" />
      </div>
      <!-- <div slot="footer" class="dialog-footer basebtn">
        <div>
          <button @click="dialog.picPreview=false" class="dialog-button active last">关 闭</button>
        </div>
      </div> -->
    </el-dialog>
    <!-- 克隆项目弹窗 -->
    <el-dialog
      title=""
      :visible.sync="copyProjectState"
      :pos="'center'"
      width="366px"
      class="copy-project-popup">
      <div class="copy-popup">
        <h4 class="title">选择您要克隆的任务 </h4>
        <ul class="items">
          <li class="item" @click="taskCopySelect(index)" v-for="(item, index) in copyTaskList" :key="index">
            <span class="item-txt" :class="item.state ? 'active' : ''">{{item.codeNo}}</span>
            <el-checkbox class="item-check" v-model="item.state"></el-checkbox>
            <i class="bg"></i>
          </li>
        </ul>
        <h4 class="last" v-if="copyTask.length == 0">克隆项目至少需选择一个任务 </h4>
        <div class="copy-btn">
          <a v-if="copyTask.length > 0" class="btn btn-submit" :disabled="btnSubmitState" :class="{'disable': btnSubmitState}" @click="_copyProject">
            {{btnSubmitInfo}}
          </a>
          <a v-else-if="copyTask.length == 0" class="btn btn-no">确定</a>
          <a class="btn btn-cancel" @click="copyProjectState = false">取消</a>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import 'codemirror/lib/codemirror.css'
import { Viewer } from '@toast-ui/vue-editor'
import openProDataset from './openproject_dataset'
import { verifyFileType, computedDurTime } from '@/common/js/utils'
import { mapGetters } from 'vuex'
import { getPublicProjectDetail, getProjectPublicJob } from '../../api/open_project.js'
import { copyProject } from '../../api/project.js'
import axios from 'axios'
import { getPublicProjectFileList } from '../../api/filecenter'
import * as monaco from 'monaco-editor'

export default {
  components: {
    'viewer': Viewer,
    openProDataset
  },
  data () {
    return {
      activeTab: 0,
      // 项目信息
      projectDetail: [],
      // 运行任务 列表
      taskList: [],
      // 任务总条数
      totalTask: 0,
      // 任务当前页
      pageNumberTask: 1,
      // 每页显示条数
      pageSizeTask: 10,
      // 当前选择任务
      curTaskArrId: 0,
      // 表单信息
      form: {},
      activeName: '1',
      // 总页数
      totalPage: 0,
      // 每页条数
      pageSize: 10,
      // 当前页
      pageNumber: 1,
      // 文件路径
      filePath: ['/'],
      // 当前文件路径
      curFilePath: '/',
      // 文件列表
      fileList: [],
      // 弹窗显隐
      dialog: {
        picPreview: false
      },
      // 文件内容
      fileContent: '',
      // 显示编辑器
      showEditor: false,
      // 编辑器显示编辑按钮
      showEdit: true,
      // 编辑器是否可编辑
      readOnly: true,
      // 当前编辑文件
      curEditFile: '',
      // 当前浏览图片
      curPicPreView: '',
      editor: '',
      // 展示Markdown
      showMarkdown: false,
      // markdown文件内容
      markdownData: '',
      editorOptions: {
        hideModeSwitch: true
      },
      curPublicProject: {},
      // 克隆项目弹窗状态
      copyProjectState: false,
      // 子任务列表 克隆
      copyTaskList: [
        // {
        //   name: '1',
        //   state: false
        // }, {
        //   name: '2',
        //   state: false
        // }
      ],
      // 克隆选中任务
      copyTask: [],
      // 克隆提交文字
      // btn-submit
      btnSubmitInfo: '确定',
      btnSubmitState: false,
      previewFilePath: ''
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted () {
    this._getPublicProjectDetail()
    this._getFileList('/')
    this._getFileContent()
    // 获取运行任务
    this._getProjectPublicJob()
    this._getAllProjectPublicJob()
  },
  methods: {
    // 跳转任务详情
    linkToTaskDetail (row) {
      this.$router.push({ path: '/openproject/task/view/result', query: { taskname: row.jobName, taskid: row.id, type: 1 } })
    },
    // 克隆子任务选中
    taskCopySelect (index) {
      this.copyTask.length = 0
      this.copyTaskList[index].state = !this.copyTaskList[index].state
      this.copyTaskList.map(item => {
        if (item.state) {
          this.copyTask.push(item.id)
        }
      })
    },
    toggleActive (val) {
      this.activeTab = val
      if (val === 1) {
        this.showEditor = false
        this.pageNumber = 1
        this._getFileList('/')
        this._getFileContent()
      }
    },
    taskDetail (item) {
      this.form = item
    },
    // 选择任务
    chooseTask (index) {
      this.curTaskArrId = index
    },
    // 复制项目
    copyProject () {
      this.copyTask.length = 0
      if (this.copyTaskList.length > 0) {
        this.copyTaskList[0].state = true
        this.copyTaskList.map(item => {
          if (item.state) {
            this.copyTask.push(item.id)
          }
        })
      }
      this.copyProjectState = true
      // this.$confirm('此操作将复制项目, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this._copyProject()
      // })
    },
    handleSizeChangeTask (val) {
      this.pageSizeTask = val
      this.pageNumberTask = 1
      this._getProjectPublicJob()
    },
    // 页数改变
    handleCurrentChangeTask (val) {
      this.pageNumberTask = val
      this._getProjectPublicJob()
    },
    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.pageNumber = 1
      this._getFileList(this.curFilePath)
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      this._getFileList(this.curFilePath)
    },
    // 点击Table列
    clickTableRow (row) {
      if (row.directory) {
        this.goToFolder(row.fileName)
        this.showEditor = false
      } else if (row.isImg) {
        this.dialog.picPreview = true
        this._previewImg(row).then(res => {
          this.curPicPreView = URL.createObjectURL(res)
        })
      } else {
        let fileType = row.fileName.replace(/.+\./, '')
        if (verifyFileType(fileType)) {
          this.curEditFile = row
          this.fileContent = ''
          this._getFileContent(row)
          if (this.curFilePath === '/') {
            this.curFilePath = `/${row.fileName}`
          } else {
            this.curFilePath = `${this.curFilePath}/${row.fileName}`
          }
          this.showEditor = true
        } else {
          this.$message({ message: '暂不支持该文件类型预览', showClose: true, type: 'warning' })
        }
      }
    },
    // 点击文件夹
    goToFolder (dir) {
      this.pageNumber = 1
      if (this.curFilePath === '/') {
        this.curFilePath = `/${dir}`
      } else {
        this.curFilePath = `${this.curFilePath}/${dir}`
      }
      this.filePath.push(dir)
      this._getFileList(this.curFilePath)
    },
    // 点击文件路径
    clickFilePath (val, key) {
      this.showEditor = false
      this.pageNumber = 1
      if (val === '/') {
        this.curFilePath = '/'
        this.filePath = ['/']
        this._getFileList('/')
      } else {
        let path = ''
        let pathArr = this.filePath.slice(0, key + 2)
        this.filePath = pathArr
        pathArr.map((item, index) => {
          if (index === 0) {
            path = item
          } else if (index === 1) {
            path = path + item
          } else {
            path = `${path}/${item}`
          }
        })
        this.curFilePath = path
        this._getFileList(path)
      }
    },
    // table头部样式
    tableheaderClassName ({ row, rowIndex }) {
      return 'table-head-th'
    },
    /*
      -----接口调用-----
    */
    // 获取运行任务
    _getProjectPublicJob () {
      let query = `?pageNumber=${this.pageNumberTask}&pageSize=${this.pageSizeTask}&projectId=${this.$route.query.id}`
      getProjectPublicJob(query).then(res => {
        if (res.message.code === 0) {
          // taskList
          this.taskList = [...res.data.list]
          this.totalTask = res.data.total
          this.taskList.map(item => {
            item.duration = computedDurTime(parseInt((item.completedTime - item.createdTime) / 1000))
            if (item.state === 'SUCCEEDED') {
              item.status = '成功'
              item.statusClass = 'status-success'
            }
          })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    _getAllProjectPublicJob () {
      let query = `?pageNumber=1&pageSize=9999&projectId=${this.$route.query.id}`
      getProjectPublicJob(query).then(res => {
        if (res.message.code === 0) {
          // res.data.list
          this.copyTaskList = [...res.data.list]
          this.copyTaskList.sort((a, b) => {
            return b.codeNo - a.codeNo
          })
          this.copyTaskList.map((item, index) => {
            // if (index === 0) item.state = true
            item.state = false
            item.codeNo = `#${item.codeNo}`
            return item
          })
        }
      })
    },
    // 查询文件列表
    _getFileList (path) {
      let para = `?projectId=${this.$route.query.id}&dir=${path}&pageNumber=${this.pageNumber}&pageSize=${this.pageSize}`
      getPublicProjectFileList(para).then(res => {
        if (res.message.code === 0) {
          this.totalPage = res.data.totalCount
          this.fileList = res.data.fileList
          // 判断是否是图片
          let imgExt = ['.png', '.jpg', '.jpeg', '.bmp', '.gif']
          if (this.fileList) {
            this.fileList.forEach(el => {
              let isImg = imgExt.contain(el.fileName.extension())
              el.isImg = isImg
              if (isImg) {
                let preOpt = {}
                let separator = this.curFilePath === '/' ? '' : '/'
                preOpt.src = `/gateway/fileCenter/api/file/publicProjectFile/preview?userId=${this.userInfo.userId}&dir=${this.curFilePath + separator + el.fileName}`
                el.preOpt = preOpt
              }
            })
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 下载文件内容
    _getFileContent (row) {
      let separator = this.curFilePath === '/' ? '' : '/'
      let fileUrl = ''
      if (row) {
        fileUrl = `/gateway/fileCenter/api/file/publicProjectFile/preview?projectId=${this.$route.query.id}&dir=${this.curFilePath + separator + row.fileName}`
      } else {
        fileUrl = `/gateway/fileCenter/api/file/publicProjectFile/preview?projectId=${this.$route.query.id}&dir=/README.md`
      }
      axios({
        method: 'get',
        url: fileUrl
      }).then(res => {
        if (row) {
          this.fileContent = res.data
          this.$refs.container.innerHTML = ''
          this.editor = monaco.editor.create(document.getElementById('container'), {
            value: '',
            language: 'python',
            readOnly: true
          })
          if (typeof this.fileContent === 'object') {
            this.fileContent = res.request.response
            this.editor.setValue(this.fileContent)
          } else {
            this.editor.setValue(String(this.fileContent))
          }
        } else {
          if (res.data === '') {
            this.showMarkdown = false
          } else {
            this.showMarkdown = true
            this.markdownData = res.data
          }
        }
      })
    },
    // 预览图片
    _previewImg (row) {
      let separator = this.curFilePath === '/' ? '' : '/'
      let fileUrl = `/gateway/fileCenter/api/file/publicProjectFile/preview?projectId=${this.curPublicProject.id}&dir=${this.curFilePath + separator + row.fileName}`
      return axios({
        method: 'get',
        url: fileUrl,
        responseType: 'blob',
        emulateJSON: true
      }).then(res => {
        return Promise.resolve(res.data)
      })
    },
    // 查询公开项目明细
    _getPublicProjectDetail () {
      let query = `?projectId=${this.$route.query.id}`
      getPublicProjectDetail(query).then(res => {
        if (res.message.code === 0) {
          this.curPublicProject = res.data
          // let configObj = JSON.parse(res.data.config)
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 复制项目
    _copyProject () {
      this.btnSubmitInfo = '运行中'
      this.btnSubmitState = true
      let query = `?projectId=${this.curPublicProject.id}&jobIds=${this.copyTask.join(',')}`
      copyProject(query).then(res => {
        this.btnSubmitInfo = '确定'
        this.btnSubmitState = false
        if (res.message && res.message.code === 0) {
          this.$message({ message: '克隆成功', showClose: true, type: 'success' })
          this.$router.push('/project/list')
        } else if (res.message && res.message.code === 10000) {
          this.$message({ message: '克隆项目失败，文件已经存在', showClose: true, type: 'warning' })
        } else {
          this.$message({ message: (res.message && res.message.message) || '克隆失败', showClose: true, type: 'error' })
        }
      }).catch(() => {
        this.btnSubmitInfo = '确定'
        this.btnSubmitState = false
      })
    }
  }
}
</script>

<style lang="stylus">
@import "../../common/stylus/mixin"
@import "../../common/stylus/base"
@import "../../common/stylus/core/dataset-detail"
.openproject-detail
  .header
    background #F4F7F8
    .header-desc
      display flex
      width 100%
      margin 0 auto
      max-width 1162px
      padding-top 30px
      box-sizing border-box
      .header-left
        width 60%
        .title
          font-weight 600
          font-size 28px
          color #24292E
          letter-spacing 0
        .desc
          margin 20px 0
          font-size 14px
          color #6E6E6E
          line-height 24px
          box-sizing border-box
      .header-right
        font-size 14px
        color #6E6E6E
        display flex
        width 40%
        justify-content flex-end
        align-items end
        margin-top 50px
        .project-env
          display flex
          justify-content flex-end
          font-size 14px
          color #6E6E6E
          line-height 24px
          align-items center
          >span
            padding-left 19px
            display flex
            align-items center
            >img
              width 15px
              height 15px
              display inline-block
              margin-right 7px
              vertical-align top
    .nav-list
      width 100%
      position relative
      margin 0 auto
      max-width 1162px
      display flex
      .main-nav-list
        height 100%
        .main-nav-list-container
          display flex
          height 100%
          align-items flex-end
          .icon
            display inline-block
            width 20px
            height 50px
          .icon-code
            background url(../../common/image/icon-project/copy-project-edit-one-no.png) no-repeat center left
            background-size 16px 16px
          .icon-parameter
            background url(../../common/image/icon-project/ico-parameter-no.png) no-repeat center left
            background-size 16px 16px
          .icon-dataset
            background url(../../common/image/icon-project/data-set--left-ico-no.png) no-repeat center left
            background-size 16px 16px
          li:first-child
            margin-left 0
          .nav-item
            padding 0 10px
            font-weight 600
            font-size 14px
            display flex
            color #666
            justify-content center
            align-items center
            cursor pointer
            position relative
            margin 0
            >a
              color #666
              text-decoration none
              cursor pointer
            >a:before
              content ''
              position absolute
              top 0
              right 0
              bottom 0
              left 0
          .link-item
            padding 0 30px
            height 44px
        .nav-item.active
          font-weight bold
          color #2d323b
          background #fff
          box-shadow 0 14px 0 -10px #f3c922 inset
          border-radius 5px 5px 0 0
          .icon-code
            background url(../../common/image/icon-project/copy-project-edit-one.png) no-repeat center left
            background-size 16px 16px
          .icon-parameter
            background url(../../common/image/icon-project/ico-parameter.png) no-repeat center left
            background-size 16px 16px
          .icon-dataset
            background url(../../common/image/icon-project/data-set--left-ico.png) no-repeat center left
            background-size 16px 16px
    .nav-left
      width 70%
    .nav-right
      width 40%
      display flex
      align-items center
      justify-content flex-end
      .button-icon
        display inline-block
        width 10px
        height 14px
        background-repeat no-repeat
        background-size 10px 14px
        margin-right 10px
      .fork-btn
        >span
          display flex
          align-items center
      .button-icon-fork
        background-image url('../../common/image/icon/fork-white.png')
  .content
    width 100%
    position relative
    margin 0 auto
    max-width 1162px
    .project-run
      padding 22px 0
      .task-table
        .table-seize
          opacity 0
        .status-success
          display inline-block
          padding 0 8px
          height 22px
          line-height 22px
          background #0ECC78
          font-size 12px
          color #fff
          text-align center
          cursor pointer
          border-radius 4px
        .table-links
          font-weight 600
    .prj-dataset
      width 100%
      background #ffffff
      padding 20px 0
    .form-task-left
      display inline-block
      width 22%
      height 347px
      background #F8F9FA
      margin-right 3%
      .task-list
        height 80%
        overflow auto
        li
          height 38px
          line-height 38px
          padding 5px 10px
          cursor pointer
          display flex
          align-items center
          color #2D323B
          font-size 14px
          font-weight bold
        .active
          background #E0E3E8
        .task-del
          display none
        .task-item
          &:hover
            background #E0E3E8
            .task-del
              display inline
    .markdown-box
      border 1px solid #ebeef5
      margin-top 20px
      .header-markdown
        display flex
        justify-content space-between
        font-size 12px
        border-bottom 1px solid #ebeef5
        padding 10px 20px
        .header-left
          display flex
          align-items center
          height 20px
          line-height 20px
          >img
            width 16px
            height 16px
            margin-right 13px
      .markdown-content
        padding 20px
    .form-task-right
      width 75%
      float right
      .item-container
        margin-bottom 20px
      .task-right-box
        width 100%
        display flex
        justify-content space-between
        .task-right-item
          width 48%
      .custom-task-body
        width 100%
        .custom-task-param
          width 100%
          font-size 0
          .task-param-list
            display inline-block
            width 30%
            margin-right 5%
            &:nth-child(3n+3)
              margin-right 0
            .title
              height 36px
              line-height 36px
              font-size 14px
              color #333
        .custom-task-command
          width 100%
          padding-bottom 12px
          .name
            height 36px
            line-height 36px
            font-size 14px
            color #333
            font-weight 600
    .prj-code
      .content
        width 100%
        position relative
        margin 0 auto
        max-width 1162px
        padding 20px 0
        .filepath-header
          height 20px
          line-height 20px
          display flex
          align-items center
          // padding-left 10px
          margin-bottom 10px
          .file-icon
            width 16px
            height 16px
            display inline-block
          .breadcrumb
            display inline-block
            font-weight 600
            font-size 14px
            color #2D323B
            padding-left 10px
            .file-path
              cursor pointer
              &:hover
                color: $color-lan
        .file-table
          .table-head
            padding-left 14px
            .head-icon
              model(16px,16px,0 11px 0 0)
              background-image url('../../common/image/icon/folder.png')
              background-size 16px 16px
              display inline-block
              vertical-align middle
              font-size 0
            .head-txt
              font-size 14px
              color #4A4A4A
          .table-link
            padding-left 14px
            cursor pointer
            >span
              color #409eff
              &:hover
                color: $color-lan
          .file-icon
            model(16px,16px,0 11px 0 0)
            background-image url('../../common/image/icon/file.png')
            background-size 16px 16px
            display inline-block
            vertical-align middle
          .folder-icon
            model(16px,16px,0 11px 0 0)
            background-image url('../../common/image/icon/folder.png')
            background-size 16px 16px
            display inline-block
            vertical-align middle
          .file-pic
            model(16px,16px,0 11px 0 0)
            background-image url('../../common/image/icon/file-image.png')
            background-size 16px 16px
            display inline-block
            vertical-align middle
    .table-action
      color #4285f4
      cursor pointer
      margin-right 10px
    .editor-container
      margin-top 20px
      .editor-header
        height 24px
        line-height 24px
        background-color #f7f7f7
        border 1px solid #ddd
        border-bottom none
        >span
          padding 0 10px
        .action
          padding-right 10px
          color #4285f4
          cursor pointer
      .code-eidtor
        border #ddd solid 1px
        margin-bottom 10px
        line-height 24px
  .title
    height 30px
    line-height 30px
    font-size 14px
    font-weight bold
  .table-head-th
    background #F1F8FF
    font-weight 600
    font-size 14px
    color #4A4A4A
  .dialog-button
    float none
  .picPreview
    display flex
    justify-content center
    box-shadow none
    img
      width 90%
      height 90%
.copy-project-popup
  .el-dialog__header
    padding 0
    .el-dialog__headerbtn
      height 0
      opacity 0
  .el-dialog__body
    padding 28px 0 35px 0
    .copy-popup
      width 100%
      .title
        width 290px
        margin 0 auto
        margin-bottom 18px
        line-height 20px
        padding-bottom 2px
        font-size 14px
        color #676767
        border-bottom  1px solid #E2E3E3
      .items
        width 100%
        max-height 196px
        overflow-y auto
        .item
          position relative
          height 32px
          line-height 32px
          padding 0 38px
          display flex
          cursor pointer
          &:hover
            background #F1F8FF
          .item-txt
            flex 0 0 260px
            font-size 14px
            color #606266
          .active
            color #409EFF
          .item-check
            flex 1
          .bg
            display block
            width 100%
            height 32px
            position absolute
            top 0
            left 0
            z-index 11
            opacity 0
      .last
        width 290px
        margin 0 auto
        line-height 18px
        padding-top 6px
        font-size 14px
        color #676767
        border-top 1px solid #E2E3E3
      .copy-btn
        padding-top 36px
        font-size 0
        text-align center
        .btn
          display inline-block
          width 98px
          height 32px
          line-height 30px
          background #2E94F9
          border-radius 4px
          font-size 12px
          color #FFFFFF
          cursor pointer
        .btn-submit
          background #2E94F9
          border 1px solid #2E94F9
          &:hover
            background #66b1ff
            border 1px solid #66b1ff
        .disable
          background #ccc!important
          border-color #ccc!important
          color #fff!important
        .btn-no
          color #fff
          background #CCCCCC
          border 1px solid #CCCCCC
          cursor not-allowed
        .btn-cancel
          margin-left 24px
          background #fff
          border 1px solid #CCCCCC
          font-size 14px
          color #24292E
          &:hover
            color #ccc
</style>
